<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }

        ul {
            list-style: none;
            background: black;
            text-align: left;
        }

        ul li {
            display: inline-block;
            position: relative;
        }

        ul li a {
            background: black;
            display: block;
            padding: 20px 45px;
            color: white;
            text-decoration: none;
            font-size: 25px;
            font-weight: bold;
            text-align: center;
        }

        ul li a:hover {
            color: lightseagreen;
        }

        ul li:hover ul.dropdown {
            display: block;
        }

        #active {
            color: lightseagreen;
        }




        #di {
            background-color: #222222;
            height: 300px;
            display: flex;



        }

        #di div {
            float: left;
            margin: 50px 150px;
            line-height: 30px;
        }

        #di a {
            color: #666666;
            width: 200px;
        }

        #di a dt {
            color: white;
        }

        #di .dl hr {
            color: #666666;
        }

        #di .d1 {

            width: 200px;
            height: 100px;
        }

        #di .d2 {

            width: 300px;
            height: 100px;
        }

        #di .d3 {

            width: 300px;
            height: 100px;

        }


        .zh {
            font-size: 20px;
            color: #666666;
            text-align: center;
            background-color: black;
            height: 100px;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div>
        <ul>
            <li>
                <a href="#" id="active">国际</a>
            </li>
            <li>
                <a href="#">财经</a>
            </li>
            <li>
                <a href="#">国内</a>
            </li>
            <li>
                <a href="#">首页</a>

            </li>
            <li>
                <a href="#">响应式</a>
            </li>
            <li>
                <a href="#">主流布局</a>
            </li>
        </ul>

    </div>

    <div id="di" style="clear:both">
        <div class="d1">
            <dl>
                <a href="#">
                    <dt>合作伙伴</dt>
                </a>
                <hr>
                <a href="#">
                    <dd>关于新闻</dd>
                </a>
                <a href="#">
                    <dd>广告服务</dd>
                </a>
                <a href="#">
                    <dd>联系我们</dd>
                </a>
                <a href="#">
                    <dd>招聘信息</dd>
                </a>
                <a href="#">
                    <dd>版权所有</dd>
                </a>
            </dl>
        </div>

        <div class="d2">
            <dl class="dl2">
                <a href="#">
                    <dt>营业执照电信业务审批</dt>
                </a>
                <hr>
                <a href="#">
                    <dd>第24号广播电视节目制作经营许可证</dd>
                </a>
                <a href="#">
                    <dd>食品经营许可证：JY11105292385445</dd>
                </a>
                <a href="#">
                    <dd>违法和不良信息举报</dd>
                </a>
                <a href="#">
                    <dd>涉未成年、网络暴力、谣言和虚假有害信息举报</dd>
                </a>
            </dl>
        </div>
        <div class="d3">
            <dl>

                <a href="#">
                    <dt>联系方式</dt>
                </a>
                <hr>
                <a href="#">
                    <dd>微博：weibo.com/huaxia</dd>
                </a>
                <a href="#">
                    <dd>邮件：huaxia@huaxia.com</dd>
                </a>
                <a href="#">
                    <dd>地址：北京市海淀区236号-5-23</dd>
                </a>

            </dl>


        </div>
    </div>

    <div class="zh">
        <p>京ICP备18035944号-2@版权所有 中华网</p>
    </div>
</body>

</html>